<!-- 已选中人员 -->
<template>
  <div class="_mt-20 _mb-20">
    <span class="fw-6">已选（{{ list.length }}人）</span>
    <template v-for="(item, index) in list">
      <span v-if="index < 10" :key="index">
        <span v-if="index !== 0">，</span>
        <span :key="index">{{ item.personName }}</span>
      </span>
    </template>
    <a v-if="list.length > 10" class="_ml-10" @click="visible = true">查看全部</a>

    <a-modal v-model="visible" title="已选择用户" :maskClosable="false" centered :footer="null">
      <template v-for="(item, index) in list">
        <span :key="index">
          <span v-if="index !== 0">，</span>
          <span :key="index">{{ item.personName }}</span>
        </span>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {},
  created() {}
}
</script>
<style scoped></style>
